<%--
  Created by IntelliJ IDEA.
  User: Heoi
  Date: 2018/8/8
  Time: 20:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>WMS-演示版</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.js?skin=blue"></script>
    <script type="text/javascript" src="/js/plugins/validata/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/js/plugins/validata/messages_cn.js"></script>
    <script type="text/javascript" src="/js/plugins/form/jQueryForm.js"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <script> //插件传入的都是json对象
    $(function () {


        $("#editForm").validate({
            rules: {
                name: {
                    required: true,
                    rangelength: [2, 10],
                },
                password: {

                    rangelength: [2, 10],
        //             equalTo:"#password"   //和谁的长度一样
        //             range:[16, 60] //范围
        //             digits:true;//只能输入数据
        // email:true;

                },
                age:{
                    required: true,
                    range:[16, 60],
                    digits:true,
                },

                email:{
                    email:true
                }


            }
        });
        //异步提交表单要在js拦截之后,如果js拦截成功,不会执行下面的代码,拦截只做同步拦截
        //异步提交表单要在js拦截之后,如果js拦截成功,不会执行下面的代码,拦截只做同步拦截
        $("#editForm").ajaxForm(function (data) {
            //提交成功后刷新界面
            if (data.success) {
                console.log(data.success);
                showAlog("操作成功",function () {
                    location.href = "/employee/list.do";
                })
            }
        })

        //去除角色重复
        $.each($(".selectAll option"),function (i,ele) {
            //过滤属性不需要加":"
            $(".optionAll option[value=" + ele.value + "]").remove();
        })
        //移动选项
        $("#select").click(function () {
            $(".optionAll option:selected").appendTo(".selectAll")
        })

        $("#selectAll").click(function () {
            $(".optionAll option").appendTo(".selectAll")
        })

        $("#deselect").click(function () {
            $(".selectAll option:selected").appendTo(".optionAll")
        })

        $("#deselectAll").click(function () {
            $(".selectAll option").appendTo(".optionAll")
        })


        //提交之前选中所有的selectAll中的选项
        $(".btn_submit").click(function () {
            $(".selectAll option").prop("selected",true);
            $("#editForm").submit();
        })


        //如果admin被选中,角色应该不存在
        var roles =null;
        $(".admin").click(function () {
            if (this.checked) {
                console.log($(".admin").prop("checked"));
                roles = $("#hidden").detach();
                console.log(roles);
            }
            else{
              console.log($(this).closest("tr"));
              console.log(roles);


                $(this).closest("tr").after(roles)
            }
        })
        <c:if test="${entity.admin}">
        roles = $("#hidden").detach();

        </c:if>
    })</script>
</head>
<body>

<form id="editForm" action="/employee/saveOrUpdate.do" method="post">
    <input type="hidden" name="id" value="${entity.id}">
    <div id="container">
        <div id="nav_links">
            <span style="color: #1A5CC6;">用户编辑</span>
            <div id="page_close">
                <a>
                    <img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
                </a>
            </div>
        </div>
        <div class="ui_content">
            <table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
                <tr>
                    <td class="ui_text_rt" width="140">用户名</td>
                    <td class="ui_text_lt">
                        <input name="name" value="${entity.name}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <c:if test="${empty entity}">
                <tr>
                    <td class="ui_text_rt" width="140">密码</td>
                    <td class="ui_text_lt">
                        <input type="password" name="password"  id="password" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">验证密码</td>
                    <td class="ui_text_lt">
                        <input name="repassword" type="password" class="ui_input_txt02" />
                    </td>
                </tr>
                </c:if>
                <tr>
                    <td class="ui_text_rt" width="140" >Email</td>
                    <td class="ui_text_lt">
                        <input name="email" value="${entity.email}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">年龄</td>
                    <td class="ui_text_lt">
                        <input name="age" value="${entity.age}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">所属部门</td>
                    <td class="ui_text_lt">
                        <select name="dept.id" class="ui_select03">
                        <c:forEach items="${depts}" var="d">

                            <option value=${d.id}>${d.name}</option>
                        </c:forEach>
                            <script>$("select[name='dept.id'] option[value=${entity.dept.id}]").prop("selected",true)</script>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt " width="140">超级管理员</td>

                    <td class="ui_text_lt">
                        <input type="checkbox" name="admin" ${entity.admin ? 'checked':''} class="ui_checkbox01 admin"/>
                    </td>
                </tr>
                <tr id="hidden">
                    <td class="ui_text_rt" width="140">角色</td>
                    <td class="ui_text_lt">
                        <table>
                            <tr>
                                <td>
                                    <select multiple="true" class="ui_multiselect01 optionAll">
                                        <c:forEach items="${roles}" var="p">
                                            <option value="${p.id}">${p.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                                <td align="center">
                                    <input type="button" id="select" value="-->" class="left2right"/><br/>
                                    <input type="button" id="selectAll" value="==>" class="left2right"/><br/>
                                    <input type="button" id="deselect" value="<--" class="left2right"/><br/>
                                    <input type="button" id="deselectAll" value="<==" class="left2right"/>
                                </td>
                                <td>
                                    <select multiple="true" class="ui_multiselect01 selectAll" name="roleIds">
                                        <c:forEach items="${entity.roles}" var="p">
                                            <option value="${p.id}">${p.name}</option>
                                        </c:forEach>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="ui_text_lt">
                        &nbsp;<input type="button" value="确定保存" class="ui_input_btn01 btn_submit"/>
                        &nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>
</body>
</html>
